﻿<?php
session_start();
if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {
    header("Location: login.php");
    exit;
}
require_once 'db.php';
$stmt = $pdo->query('SELECT content FROM knowledge_base ORDER BY id DESC LIMIT 1');
$row = $stmt->fetch();
$saved_content = $row ? $row['content'] : '';
?>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识库-SHCM-GZWM</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prism-themes/themes/prism-vsc-dark-plus.css">
    <link rel="icon" type="image/x-icon" href="logo.ico">
    <style>
        /* 移除测试样式 */
        /* body { background: #ffcccc !important; } */
        body {
            background: #f4f6fa;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
            color: #222;
            font-size: 16px;
            line-height: 1.7;
        }
        .navbar {
            box-shadow: 0 4px 24px rgba(25, 118, 210, 0.10);
            background: linear-gradient(90deg, #1976d2 0%, #1565c0 100%);
            backdrop-filter: blur(8px);
            border-bottom: 1.5px solid #e3eaf2;
            z-index: 1100;
            padding: 0.4rem 1rem;
        }
        .navbar .navbar-brand {
            font-size: 1.6rem;
            font-weight: bold;
            letter-spacing: 2px;
            color: #fff !important;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0.3rem 0;
        }
        .navbar .navbar-brand::before {
            content: '\1F4D6';
            font-size: 1.3em;
            margin-right: 4px;
        }
        .navbar .navbar-nav {
            gap: 16px;
            align-items: center;
        }
        .navbar .nav-link, .navbar .nav-item {
            color: #e3eaf2 !important;
            font-size: 0.95rem;
            position: relative;
            padding: 4px 12px;
            border-radius: 6px;
            transition: background 0.2s, color 0.2s;
        }
        .navbar .nav-link:hover, .navbar .nav-item:hover {
            color: #fff !important;
            background: rgba(25, 118, 210, 0.12);
        }
        .navbar .nav-link::after {
            content: '';
            display: block;
            height: 2px;
            width: 0;
            background: #fff;
            border-radius: 2px;
            transition: width 0.3s;
            margin-top: 2px;
        }
        .navbar .nav-link:hover::after {
            width: 100%;
        }
        .navbar .nav-item.nav-link.text-light {
            font-weight: 500;
            color: #fff !important;
            background: rgba(25, 118, 210, 0.08);
            border-radius: 6px;
            margin-right: 8px;
            padding: 4px 14px;
        }
        .navbar .nav-link[href="logout.php"] {
            background: #fff;
            color: #1976d2 !important;
            border-radius: 16px;
            font-weight: bold;
            box-shadow: 0 2px 8px rgba(25, 118, 210, 0.08);
            transition: background 0.2s, color 0.2s;
            padding: 4px 14px;
        }
        .navbar .nav-link[href="logout.php"]:hover {
            background: #1976d2;
            color: #fff !important;
        }
        .content-container {
            margin-top: 40px;
            margin-bottom: 40px;
        }
        .main-content {
            margin-left: auto !important;
            max-width: 1000px !important;
            width: 100% !important;
            padding: 0 24px !important;
            margin-right: auto !important;
            margin-top: 40px !important;
            margin-bottom: 40px !important;
            box-sizing: border-box !important;
        }
        .card {
            border-radius: 18px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.10);
            border: none;
            background: #fff;
        }
        .card-header {
            background: transparent;
            border-bottom: none;
            padding-bottom: 0.5rem;
        }
        .card-title {
            font-size: 1.3rem;
            font-weight: bold;
            color: #1976d2;
            letter-spacing: 1px;
        }
        #viewContent {
            padding: 32px 32px 24px 32px;
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            min-height: 300px;
        }
        #contentForm {
            padding: 32px 32px 24px 32px;
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .toc-container {
            position: fixed !important;
            left: 30px !important;
            top: 130px !important;
            width: auto !important;
            min-width: 320px !important;
            max-width: 560px !important;
            max-height: calc(100vh - 140px) !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            background: #f8fafc !important;
            padding: 22px 20px 16px 20px !important;
            border-radius: 16px !important;
            box-shadow: 0 4px 24px rgba(0,0,0,0.10) !important;
            font-size: 15px !important;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif !important;
            border: 1px solid #e5e7eb !important;
            z-index: 1000 !important;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            display: block !important;
            pointer-events: none !important;
        }
        .toc-container.show {
            transform: translateX(0);
            pointer-events: auto !important;
        }
        /* 触发区域样式 */
        .toc-trigger-area {
            position: fixed !important;
            left: 0 !important;
            top: 0 !important;
            width: 30px !important;
            height: 100vh !important;
            z-index: 999 !important;
            cursor: pointer !important;
            background: transparent !important;
            display: block !important;
        }
        .toc-content {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .toc-container h5 {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 14px;
            color: #1976d2;
            letter-spacing: 1px;
        }
        .toc-container ul {
            list-style: none;
            padding-left: 0;
            margin: 0;
            width: 100%;
        }
        .toc-container li {
            margin: 4px 0;
            padding-left: 0.2em;
            border-left: 2px solid #e0e7ef;
            transition: all 0.2s;
            width: 100%;
            box-sizing: border-box;
        }
        .toc-container li.toc-level-1 > a {
            font-weight: bold;
            color: #333;
        }
        .toc-container li.toc-level-2 {
            padding-left: 1.2em;
        }
        .toc-container li.toc-level-3 {
            padding-left: 3.2em;
        }
        .toc-container li.toc-level-4 {
            padding-left: 4.2em;
        }
        .toc-container li.toc-level-5 {
            padding-left: 5.2em;
        }
        .toc-container li.toc-level-6 {
            padding-left: 6.2em;
        }
        .toc-container a {
            color: #333;
            text-decoration: none;
            display: block;
            border-radius: 6px;
            padding: 2px 8px;
            transition: background 0.2s, color 0.2s;
            white-space: normal !important;
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
            width: 100%;
            box-sizing: border-box;
        }
        .toc-container .toc-number {
            display: inline-block;
            min-width: 2em;
            text-align: center;
            margin-right: 0.5em;
            white-space: nowrap;
        }
        .toc-container a:hover {
            background: #e0e7ef;
            color: #1976d2;
        }
        .toc-container a.active {
            background: #e0e7ef;
            color: #1976d2;
            font-weight: bold;
        }
        .toc-container li.active {
            border-left-color: #1976d2;
        }
        .toc-container li li.active {
            border-left-color: #1976d2;
        }
        #floatingEditBtn {
            position: fixed;
            top: 82px;
            right: 40px;
            z-index: 999;
            box-shadow: 0 2px 8px rgba(0,0,0,0.10);
            border-radius: 8px;
            padding: 10px 28px;
            font-size: 17px;
            font-weight: bold;
            background: linear-gradient(90deg, #1976d2 0%, #1565c0 100%);
            border: none;
            color: #fff;
            letter-spacing: 1px;
            transition: background 0.2s, box-shadow 0.2s;
        }
        #floatingEditBtn:hover {
            background: linear-gradient(90deg, #1565c0 0%, #1976d2 100%);
            box-shadow: 0 4px 16px rgba(25, 118, 210, 0.15);
            color: #fff;
        }
        @media (max-width: 1800px) {
            .main-content {
                margin-left: 600px !important;
                max-width: calc(100% - 600px) !important;
            }
        }
        @media (max-width: 1600px) {
            .main-content {
                margin-left: 580px !important;
                max-width: calc(100% - 580px) !important;
            }
        }
        @media (max-width: 1400px) {
            .main-content {
                margin-left: 560px !important;
                max-width: calc(100% - 560px) !important;
            }
        }
        @media (max-width: 1200px) {
            .main-content {
                margin-left: auto !important;
                max-width: 95vw !important;
            }
            .toc-container {
                display: none !important;
            }
        }
        @media (max-width: 992px) {
            .main-content {
                margin-left: 0 !important;
                max-width: 100vw !important;
                padding: 0 8px !important;
            }
            .toc-container {
                display: none !important;
            }
        }
        @media (max-width: 768px) {
            .container {
                padding: 0 4px !important;
            }
            #viewContent, #contentForm {
                padding: 10px !important;
            }
            .card {
                border-radius: 10px !important;
            }
            .main-content {
                margin-top: 12px !important;
                margin-bottom: 12px !important;
            }
            #backToTopBtn {
                width: 40px;
                height: 40px;
                font-size: 20px;
                line-height: 40px;
                bottom: 20px;
                right: 20px;
            }
        }
        @media (max-width: 576px) {
            .navbar .navbar-brand {
                font-size: 1.1rem !important;
            }
            .navbar .nav-link {
                font-size: 0.85rem !important;
            }
            #floatingEditBtn {
                top: 8px !important;
                right: 8px !important;
                font-size: 13px !important;
                padding: 5px 10px !important;
            }
            .content-container {
                margin-top: 8px;
                margin-bottom: 8px;
            }
            #viewContent, #contentForm {
                padding: 6px 2px;
            }
        }
        /* 标题美化 */
        #viewContent h1, #editor h1 { 
            font-size: 24px; 
            font-weight: bold; 
            margin: 1.2em 0 0.7em 0; 
            line-height: 1.2;
            position: relative;
            padding-bottom: 0.5em;
        }
        #viewContent h2, #editor h2 { 
            font-size: 20px; 
            font-weight: bold; 
            margin: 1.1em 0 0.6em 0; 
            line-height: 1.25;
        }
        #viewContent h3, #editor h3 { 
            font-size: 18px; 
            font-weight: bold; 
            margin: 1em 0 0.5em 0; 
            line-height: 1.3;
        }
        #viewContent h4, #editor h4 { 
            font-size: 16px; 
            font-weight: bold; 
            margin: 0.9em 0 0.4em 0; 
            line-height: 1.35;
        }
        #viewContent h1::after, #editor h1::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(to right, #1976d2, transparent);
        }
        #viewContent h2::after, #editor h2::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(to right, #1976d2, transparent);
            opacity: 0.7;
        }
        #viewContent h3::after, #editor h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(to right, #1976d2, transparent);
            opacity: 0.5;
        }
        #viewContent h4::after, #editor h4::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(to right, #1976d2, transparent);
            opacity: 0.3;
        }
        .edit-mode {
            display: none;
        }
        .view-mode {
            display: block;
        }
        .copy-btn {
            position: absolute;
            top: 8px;
            right: 12px;
            background: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            padding: 2px 10px;
            font-size: 12px;
            cursor: pointer;
            opacity: 0;
            z-index: 10;
            transition: opacity 0.2s ease;
        }
        pre:hover .copy-btn {
            opacity: 0.8;
        }
        .copy-btn:hover {
            opacity: 1 !important;
        }
        /* 去除所有Prism高亮token的背景色和box-shadow */
        .token,
        .token.comment,
        .token.prolog,
        .token.doctype,
        .token.cdata,
        .token.punctuation,
        .token.namespace,
        .token.deleted,
        .token.symbol,
        .token.property,
        .token.tag,
        .token.constant,
        .token.boolean,
        .token.number,
        .token.selector,
        .token.attr-name,
        .token.string,
        .token.char,
        .token.builtin,
        .token.inserted,
        .token.operator,
        .token.entity,
        .token.url,
        .token.atrule,
        .token.attr-value,
        .token.keyword,
        .token.function,
        .token.class-name,
        .token.regex,
        .token.important,
        .token.variable,
        .token.bold,
        .token.italic,
        .token.parameter,
        .token.interpolation,
        .token.interpolation-punctuation,
        .token.script,
        .token.script-punctuation,
        .token.plain-text,
        .token.property-access,
        .token.error,
        .token.warning {
            background: none !important;
            box-shadow: none !important;
        }
        html { scroll-behavior: smooth; }
        #viewContent img,
        #editor img {
            max-width: 70%;
            height: auto;
            display: block;
            margin: 12px 0;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            cursor: pointer;
            transition: transform 0.2s ease;
        }
        #viewContent img:hover,
        #editor img:hover {
            transform: scale(1.02);
        }
        .navbar .navbar-nav {
            gap: 18px;
        }
        .navbar .nav-link, .navbar .nav-item {
            margin-left: 18px;
        }
        /* 返回顶部按钮样式 */
        #backToTopBtn {
            display: none;
            position: fixed;
            bottom: 40px;
            right: 40px;
            z-index: 1001;
            background: #fff;
            color: #1976d2;
            border: none;
            border-radius: 50%;
            width: 45px;
            height: 45px;
            font-size: 20px;
            line-height: 45px;
            text-align: center;
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0.85;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #backToTopBtn:hover {
            background: #1976d2;
            color: #fff;
            box-shadow: 0 4px 16px rgba(25, 118, 210, 0.25);
            transform: translateY(-2px);
            opacity: 1;
        }
        #backToTopBtn svg {
            width: 24px;
            height: 24px;
            transition: transform 0.3s ease;
        }
        #backToTopBtn:hover svg {
            transform: translateY(-2px);
        }
        /* 版权信息样式 */
        .copyright-section {
            margin-top: 60px;
            padding: 20px 0;
            text-align: center;
            color: #666;
            font-size: 14px;
            border-top: 1px solid #e0e7ef;
            opacity: 0.8;
        }
        .copyright-section p {
            margin: 5px 0;
            line-height: 1.6;
        }
        .copyright-section a {
            color: #1976d2;
            text-decoration: none;
            transition: color 0.2s;
        }
        .copyright-section a:hover {
            color: #1565c0;
            text-decoration: underline;
        }
        /* 代码块样式 */
        pre {
            border-radius: 8px !important;
            margin: 1.5em 0 !important;
            padding: 1em !important;
            background: #1e1e1e !important;
            overflow: visible !important;
            white-space: pre-wrap !important;
            word-wrap: break-word !important;
        }
        pre code {
            border-radius: 6px !important;
            padding: 0.5em !important;
            display: block !important;
            white-space: pre-wrap !important;
            word-wrap: break-word !important;
            background: transparent !important;
        }
        /* 代码行样式 */
        .line-numbers .line-numbers-rows {
            border-right: 1px solid #2d2d2d !important;
            padding-right: 1em !important;
        }
        .line-numbers-rows > span {
            padding-right: 1em !important;
        }
        /* 确保代码块内的所有元素都支持换行 */
        .token.comment,
        .token.prolog,
        .token.doctype,
        .token.cdata,
        .token.punctuation,
        .token.property,
        .token.tag,
        .token.boolean,
        .token.number,
        .token.constant,
        .token.symbol,
        .token.selector,
        .token.attr-name,
        .token.string,
        .token.char,
        .token.builtin,
        .token.operator,
        .token.entity,
        .token.url,
        .token.atrule,
        .token.attr-value,
        .token.keyword,
        .token.function,
        .token.regex,
        .token.important,
        .token.variable {
            white-space: pre-wrap !important;
            word-wrap: break-word !important;
        }
        /* 代码高亮样式 */
        .token.comment,
        .token.prolog,
        .token.doctype,
        .token.cdata {
            color: #6A9955 !important;
        }
        .token.punctuation {
            color: #d4d4d4 !important;
        }
        .token.property,
        .token.tag,
        .token.boolean,
        .token.number,
        .token.constant,
        .token.symbol {
            color: #b5cea8 !important;
        }
        .token.selector,
        .token.attr-name,
        .token.string,
        .token.char,
        .token.builtin {
            color: #ce9178 !important;
        }
        .token.operator,
        .token.entity,
        .token.url,
        .language-css .token.string,
        .style .token.string {
            color: #d4d4d4 !important;
        }
        .token.atrule,
        .token.attr-value,
        .token.keyword {
            color: #569cd6 !important;
        }
        .token.function {
            color: #dcdcaa !important;
        }
        .token.regex,
        .token.important,
        .token.variable {
            color: #d16969 !important;
        }
        .token.important,
        .token.bold {
            font-weight: bold !important;
        }
        .token.italic {
            font-style: italic !important;
        }
        .token.entity {
            cursor: help !important;
        }
        /* 图片预览模态框样式 */
        .image-modal {
            display: none;
            position: fixed;
            z-index: 9999;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            overflow: auto;
        }
        .image-modal-content {
            margin: auto;
            display: block;
            max-width: 90%;
            max-height: 90vh;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: transform 0.1s ease;
        }
        .image-modal-close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }
        .navbar .container-fluid {
            padding-right: 1.5rem;
        }
        .navbar .navbar-nav {
            gap: 16px;
            align-items: center;
            margin-left: auto;
        }
        .navbar .nav-link, .navbar .nav-item {
            color: #e3eaf2 !important;
            font-size: 0.95rem;
            position: relative;
            padding: 4px 12px;
            border-radius: 6px;
            transition: background 0.2s, color 0.2s;
            white-space: nowrap;
        }
        .toc-arrow {
            color: red;
            font-weight: bold;
            margin-right: 2px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand ps-3" href="https://job.lahong.top:8888/">知识库系统</a>
        <div class="container-fluid">
            <div class="navbar-nav ms-auto d-flex align-items-center">
                <span class="nav-item nav-link text-light">欢迎, <?php echo htmlspecialchars($_SESSION['username']); ?></span>
                <a class="nav-link" href="logout.php">退出</a>
            </div>
        </div>
    </nav>

    <!-- 目录 -->
    <div class="toc-trigger-area"></div>
    <div class="toc-container">
        <div class="toc-content">
            <h5>目录</h5>
            <div id="toc"></div>
        </div>
    </div>

    <div class="container content-container main-content">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0"> </h5>
                    </div>
                    <div class="card-body">
                        <!-- 浏览模式 -->
                        <div id="viewContent" class="view-mode">
                            <?php echo $saved_content; ?>
                        </div>
                        <!-- 编辑模式 -->
                        <form id="contentForm" method="POST" action="save_content.php" class="edit-mode" style="display:none;">
                            <textarea id="editor" name="content"><?php echo htmlspecialchars($saved_content); ?></textarea>
                            <div class="mt-3">
                                <button type="submit" class="btn btn-success">保存</button>
                                <button type="button" class="btn btn-secondary" id="cancelEdit">取消</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <button id="floatingEditBtn" class="btn btn-primary">编辑模式</button>

    <!-- 添加图片预览模态框 -->
    <div id="imageModal" class="image-modal">
        <span class="image-modal-close">&times;</span>
        <img class="image-modal-content" id="modalImage">
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tinymce@6.8.3/tinymce.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tinymce-lang/langs/zh_CN.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-java.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
    <script>
        $(document).ready(function() {
            let isEditMode = false;
            let tocVisible = false;
            let mouseInToc = false;
            let mouseInTrigger = false;

            // 鼠标进入触发区域
            $('.toc-trigger-area').on('mouseenter', function() {
                mouseInTrigger = true;
                $('.toc-container').addClass('show');
            });

            // 鼠标离开触发区域
            $('.toc-trigger-area').on('mouseleave', function() {
                mouseInTrigger = false;
                setTimeout(function() {
                    if (!mouseInToc && !mouseInTrigger) {
                        $('.toc-container').removeClass('show');
                    }
                }, 100);
            });

            // 鼠标进入目录区域
            $('.toc-container').on('mouseenter', function() {
                mouseInToc = true;
            });

            // 鼠标离开目录区域
            $('.toc-container').on('mouseleave', function() {
                mouseInToc = false;
                setTimeout(function() {
                    if (!mouseInToc && !mouseInTrigger) {
                        $('.toc-container').removeClass('show');
                    }
                }, 100);
            });

            // 返回顶部按钮逻辑
            $(window).scroll(function() {
                if ($(this).scrollTop() > 300) { // 滚动超过300px时显示按钮
                    $('#backToTopBtn').fadeIn();
                } else {
                    $('#backToTopBtn').fadeOut();
                }
            });

            $('#backToTopBtn').click(function() {
                $('html, body').animate({ scrollTop: 0 }, 600); // 平滑滚动到顶部
                return false;
            });

            // 初始化编辑器（只初始化一次）
            tinymce.init({
                selector: '#editor',
                language: 'zh_CN',
                height: 500,
                apiKey: '0irfv0uo3fjmz4r0t5z3nux8fh3fo6uo151xpp8bwu8antyi',
                plugins: [
                    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                    'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                    'insertdatetime', 'media', 'table', 'help', 'wordcount', 'codesample'
                ],
                toolbar: 'undo redo | blocks | ' +
                    'bold italic forecolor | alignleft aligncenter ' +
                    'alignright alignjustify | bullist numlist outdent indent | ' +
                    'removeformat | codesample code | help',
                images_upload_url: 'upload_image.php',
                automatic_uploads: true,
                // 粘贴相关配置
                paste_as_text: true,
                paste_word_valid_elements: "none",
                paste_retain_style_properties: "none",
                paste_remove_styles: true,
                paste_remove_styles_if_webkit: true,
                paste_strip_class_attributes: true,
                paste_auto_cleanup_on_paste: true,
                paste_enable_default_filters: false,
                paste_merge_formats: false,
                paste_convert_word_fake_lists: false,
                paste_convert_headers_to_strong: false,
                paste_remove_trailing_br: true,
                paste_preprocess: function(plugin, args) {
                    // 移除所有换行符
                    args.content = args.content.replace(/\r\n|\r|\n/g, '');
                },
                file_picker_types: 'image',
                file_picker_callback: function (cb, value, meta) {
                    var input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.setAttribute('accept', 'image/*');

                    input.onchange = function () {
                        var file = this.files[0];
                        var reader = new FileReader();
                        reader.onload = function () {
                            var id = 'blobid' + (new Date()).getTime();
                            var blobCache = tinymce.activeEditor.editorUpload.blobCache;
                            var base64 = reader.result.split(',')[1];
                            var blobInfo = blobCache.create(id, file, base64);
                            blobCache.add(blobInfo);

                            cb(blobInfo.blobUri(), { title: file.name });
                        };
                        reader.readAsDataURL(file);
                    };

                    input.click();
                },
                content_style: `
                    img { 
                        max-width: 70% !important; 
                        height: auto !important;
                        display: block !important;
                        margin: 12px 0 !important;
                        border-radius: 6px !important;
                        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
                        cursor: pointer !important;
                        transition: transform 0.2s ease !important;
                    }
                    img:hover {
                        transform: scale(1.02) !important;
                    }
                `,
                codesample_languages: [
                    { text: 'HTML/XML', value: 'markup' },
                    { text: 'JavaScript', value: 'javascript' },
                    { text: 'CSS', value: 'css' },
                    { text: 'PHP', value: 'php' },
                    { text: 'Python', value: 'python' },
                    { text: 'Java', value: 'java' },
                    { text: 'SQL', value: 'sql' }
                ],
                setup: function(editor) {
                    editor.on('change', function() {
                        updateTOC();
                        addCopyButtons();
                    });
                },
                init_instance_callback: function(editor) {
                    updateTOC();
                    Prism.highlightAll();
                    addCopyButtons();
                },
                // 添加快捷菜单配置
                contextmenu: 'link image table | cut copy paste | bold italic | alignleft aligncenter alignright | bullist numlist | codesample code',
                contextmenu_never_use_native: true,
                // 自定义快捷菜单项
                contextmenu_ignore_selector: 'pre, code',
                contextmenu_shortcuts: {
                    'bold': 'Ctrl+B',
                    'italic': 'Ctrl+I',
                    'cut': 'Ctrl+X',
                    'copy': 'Ctrl+C',
                    'paste': 'Ctrl+V'
                },
            });

            // 切换模式
            $('#floatingEditBtn').click(function() {
                isEditMode = !isEditMode;
                if (isEditMode) {
                    $('#viewContent').hide();
                    $('#contentForm').show();
                    // AJAX 获取数据库最新内容
                    function setEditorContentWhenReadyWithAjax() {
                        var editor = tinymce.get('editor');
                        if (editor && editor.initialized) {
                            $.get('get_content.php', function(data) {
                                editor.setContent(data);
                            });
                        } else {
                            setTimeout(setEditorContentWhenReadyWithAjax, 100);
                        }
                    }
                    setEditorContentWhenReadyWithAjax();
                    $(this).text('浏览模式');
                } else {
                    const content = tinymce.get('editor').getContent();
                    $('#viewContent').html(content).show();
                    $('#contentForm').hide();
                    $(this).text('编辑模式');
                    Prism.highlightAll();
                    updateTOC();
                    addCopyButtons();
                }
            });
            // 取消编辑
            $('#cancelEdit').click(function() {
                isEditMode = false;
                $('#viewContent').show();
                $('#contentForm').hide();
                $('#floatingEditBtn').text('编辑模式');
                tinymce.get('editor').setContent($('#viewContent').html());
                updateTOC();
                addCopyButtons();
            });

            // 目录生成
            function updateTOC() {
                let content = '';
                if (isEditMode && tinymce.get('editor')) {
                    content = tinymce.get('editor').getContent();
                } else {
                    content = $('#viewContent').html();
                }
                const $content = $('<div>').html(content);
                const $toc = $('#toc');
                $toc.empty();
                const headings = $content.find('h1, h2, h3, h4, h5, h6');
                let tocHtml = '<ul>';
                let numberStack = [];
                let lastLevel = 1;
                let lastHeadingLevel = 0;
                
                headings.each(function(index) {
                    const $heading = $(this);
                    const level = parseInt($heading.prop('tagName').substring(1));
                    const text = $heading.text();
                    const id = 'heading-' + index;
                    $heading.attr('id', id);
                    
                    // 同步id到页面实际DOM
                    const realHeading = $('#viewContent').find($heading.prop('tagName')).eq($content.find($heading.prop('tagName')).index($heading));
                    if (realHeading.length) realHeading.attr('id', id);
                    
                    if (level > lastLevel) {
                        tocHtml += '<ul class="toc-level-' + level + '">'.repeat(level - lastLevel);
                    } else if (level < lastLevel) {
                        tocHtml += '</ul>'.repeat(lastLevel - level);
                    }
                    
                    // 为三级标题添加"└"符号
                    const displayText = level === 3 ? `<span class='toc-arrow'>└</span> ${text}` : text;
                    tocHtml += `<li class="toc-level-${level}"><a href="#${id}">${displayText}</a></li>`;
                    lastLevel = level;
                    lastHeadingLevel = level;
                });
                tocHtml += '</ul>'.repeat(lastLevel - 1);
                $toc.html(tocHtml);
                // 目录点击平滑滚动
                $toc.find('a').off('click').on('click', function(e) {
                    e.preventDefault();
                    const targetId = $(this).attr('href').replace('#', '');
                    const $target = $('#' + targetId);
                    if ($target.length) {
                        $('html, body').animate({ scrollTop: $target.offset().top - 30 }, 400);
                        // 移除所有目录项的高亮
                        $toc.find('a').removeClass('active');
                        $toc.find('li').removeClass('active');
                        // 为当前点击的目录项添加高亮
                        $(this).addClass('active');
                        $(this).parent('li').addClass('active');
                    }
                });

                // 监听滚动事件，自动高亮当前查看的标题
                $(window).scroll(function() {
                    const scrollPosition = $(window).scrollTop();
                    let currentHeading = null;
                    
                    // 遍历所有标题，找到当前在视口中的标题
                    $('h1, h2, h3, h4, h5, h6').each(function() {
                        const $heading = $(this);
                        const headingTop = $heading.offset().top;
                        if (headingTop <= scrollPosition + 100) {
                            currentHeading = $heading;
                        }
                    });

                    if (currentHeading) {
                        const headingId = currentHeading.attr('id');
                        // 移除所有目录项的高亮
                        $toc.find('a').removeClass('active');
                        $toc.find('li').removeClass('active');
                        // 为当前标题对应的目录项添加高亮
                        const $activeLink = $toc.find(`a[href="#${headingId}"]`);
                        $activeLink.addClass('active');
                        $activeLink.parent('li').addClass('active');
                    }
                });
            }
            // 复制按钮功能
            function addCopyButtons() {
                $(".copy-btn").remove();
                $("pre > code").each(function() {
                    var pre = $(this).parent();
                    if (pre.find('.copy-btn').length === 0) {
                        var btn = $('<button class="copy-btn">复制</button>');
                        pre.css('position', 'relative');
                        btn.appendTo(pre);
                        btn.click(function(e) {
                            e.preventDefault();
                            e.stopPropagation();
                            var code = $(this).siblings('code').text();
                            copyTextToClipboard(code);
                            $(this).text('已复制!');
                            var that = this;
                            setTimeout(function() { $(that).text('复制'); }, 1200);
                        });
                    }
                });
            }
            function copyTextToClipboard(text) {
                if (navigator.clipboard) {
                    navigator.clipboard.writeText(text);
                } else {
                    var textarea = document.createElement('textarea');
                    textarea.value = text;
                    document.body.appendChild(textarea);
                    textarea.select();
                    document.execCommand('copy');
                    document.body.removeChild(textarea);
                }
            }
            // 初始渲染
            updateTOC();
            Prism.highlightAll();
            addCopyButtons();

            // 图片点击放大功能
            let currentScale = 1;
            const modalImg = document.getElementById('modalImage');
            
            $('#viewContent img').on('click', function() {
                const modal = document.getElementById('imageModal');
                modal.style.display = "block";
                modalImg.src = this.src;
                currentScale = 1;
                modalImg.style.transform = `translate(-50%, -50%) scale(${currentScale})`;
            });

            // 鼠标滚轮缩放
            $('#imageModal').on('wheel', function(e) {
                e.preventDefault();
                const delta = e.originalEvent.deltaY;
                const scaleChange = delta > 0 ? 0.9 : 1.1;
                currentScale = Math.min(Math.max(currentScale * scaleChange, 0.5), 3);
                modalImg.style.transform = `translate(-50%, -50%) scale(${currentScale})`;
            });

            // 关闭模态框时重置缩放
            function closeModal() {
                $('#imageModal').hide();
                currentScale = 1;
                modalImg.style.transform = `translate(-50%, -50%) scale(${currentScale})`;
            }

            // 关闭模态框
            $('.image-modal-close').on('click', closeModal);

            // 点击模态框背景关闭
            $('#imageModal').on('click', function(e) {
                if (e.target === this) {
                    closeModal();
                }
            });

            // ESC键关闭模态框
            $(document).on('keydown', function(e) {
                if (e.key === "Escape") {
                    closeModal();
                }
            });
        });
    </script>
    <button id="backToTopBtn" title="返回顶部" aria-label="返回顶部">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 4L4 12h3v8h10v-8h3L12 4zm0 2.83L17.17 12H15v6H9v-6H6.83L12 6.83z"/>
        </svg>
    </button>
    
    <!-- 版权信息 -->
<div class="copyright-section">
    <p>© <span id="start-year">2024</span> - <span id="current-year"></span> 一箱两码项目知识库 | 版权所有</p>
    <p>本知识库收集整理了一箱两码项目的开发经验、技术文档和最佳实践</p>
    <p>仅供内部学习和参考使用，未经授权不得用于商业用途</p>
</div>

<script>
// 动态更新当前年份
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>
</body>
</html>